
@function r($px) {
    @return $px/40*1rem;
}

.web {
    position: relative;
    margin: 0 auto;
    padding: 0;
//  width: r(640);
    height: 100%;
    overflow-x: hidden;
    .beijing {
        z-index: 10;
        position: fixed;
        width: 100%;
        background-color: #b20000;
        height: r(90);
        .hanbao {
            position: absolute;
            top: r(28);
            img {
                width: r(40);
                height: r(40);
            }
        }
        .gimc {
            text-align: center;
            padding-top: r(30);
            img {
                width: r(190);
            }
        }
        .shous {
            position: absolute;
            top: r(30);
            right: r(10);
            border: r(2) solid white;
            border-radius: 50%;
            width: r(30);
            height: r(30);
            label{
                display: inline-block;
                height: r(30);
            }
            img {
                width: r(30);
                height: r(30);
                vertical-align: top;
                
               
            }
        }
    }
    .two {
        padding-top: 15%;
        img {
            width: 40%;
        }
    }
    .three {
        img {
            width: 100%;
        }
    }
    .cang {
        .cang_left {
            margin-top: r(5);
            padding-left: r(20);
            width: 60%;
            display: inline-block;
            h2 {
                font-size: r(17);
            }
            .chang {
                  position: relative;
                  z-index: -1;
                img {
                    width: 8%;
                    vertical-align: middle;
                }
                span {
                    font-size: r(10);
                    color: #d5d5d5;
                    vertical-align: middle;
                }
                span:nth-last-child(1) {
//                  padding-left: r(137);
                    position: absolute;
                    vertical-align: middle;
                    right: 5%;
                    top:20%;
                }
            }
            .duan {
                position: relative;
                z-index: -888;
                img {
                    width: 8%;vertical-align: middle;
                }
                span {
                    font-size: r(10);
                    color: #d5d5d5;
                    vertical-align: middle;
                }
                span:nth-last-child(1) {
//                  padding-left: r(180);
                    vertical-align: middle;
                    position: absolute;
                     right: 5%;
                     top:12%;
                }
            }
        }
        .cang_right {
            display: inline-block;
            width: 30%;
            height: r(75);
            img {
                width: 100%;
                vertical-align: text-bottom;
            }
        }
    }
    .foot {
        width: 100%;
        z-index: 10;
        position:absolute;
        bottom: 0;
        margin-top: r(-18);
        background: #f5f5f5;
        ul {
            padding-left: r(5);
            text-align: center;
            padding-top: r(5);
            li {
                a{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
                display: inline-block;
                width: 18%;
                text-align: center;
                img {
                    width: r(40);
                    height: r(40);
                }
                p {
                    font-size: r(18);
                    color: #8b8b8b;
                }
            }
        }
    }
 }



.shousi input[type="checkbox"]:checked~div {
//  height: 100%;
    transform: translateX(0);
    z-index: 999;
}

.shousi>div{
    width: 100%;
    height: 100%;
    background:#f1f1f1;
    transition: transform .5s;
    transform: translateX(100%);
    position: absolute;
    z-index: 9999;
    top: 0;
     .header{
         width: 100%;
         background: black;
         
         .guanbi{
             width: 14%;
             padding:r(10);
             display: inline-block;

             img{
                 width:r(40);
               height:r(40);
                 vertical-align: middle;
             }
         }
         .shousou{
             display: inline-block;
             border: r(2) solid white;
             width: 75%;
             border-radius: r(40);
             
             img{
                 width: r(30);
                 height: r(30);
                 padding-left: r(10);
                 vertical-align: middle;
             }
             input{
//              background: #000000;
                 width: r(400);
                 height: r(37);
                 border: none;
                 vertical-align: middle;
                 background: #000000;
             }
         }
     }
     .resou{
         
         height: r(655);
         background: #f1f1f1;
         padding: r(20);
         h2{
             font-size: r(24);
         }
         .resou_1{
           
             margin:r(5);
             text-align: center;
             display: inline-block;
             width: 23.4%;
             height:r(57);
             background: white;
//           overflow: hidden;
            
             span{
                 color: #8e8e8e;
                  font-size:r(24);
             }
         }
         .resou_2{
             margin:r(5);
             text-align: center;
              display: inline-block;
             width: 31%;
             height:r(57);
             background: white;
//           overflow: hidden;
             span{
                 color: #8e8e8e;
                  font-size:r(24);
             }
         }
         .resou_3{
             margin: r(5);
             text-align: center;
             display: inline-block;
             width: 16.5%;
             height: r(57);
             background: white;
//           overflow: hidden;
            
             span{
                 color: #8e8e8e;
                  font-size: r(24);
             }
         }
         .resou_4{
             margin:r(5);
             text-align: center;
             display: inline-block;
             width: 46%;
             height:r(57);
             background: white;
//           overflow: hidden;
            
             span{
                 color: #8e8e8e;
                  font-size:r(24);
             }
         }
     }
     .foot_1{
        
         width: 100%;
         img{
             width: 100%;
         }
     }
    /*top:194%;*/
    /*visibility: visible;*/
}


.shousi input[type="checkbox"] {
    display: none;
    visibility: hidden;
    height: 0;
    width: 0;
}
.menu{
    width: 100%;
    height: 100%;
//  .foot_2{
//      width: r(150);
//      height: r(40);
//      background: #b60005;
//      color: white;
//      font-size: r(25);
//      border-radius:r(18);
//      text-align: center;
//      margin: 0 auto;
//      margin-top: r(30);
//  }
    .fabu{
        background: #303030;
        p{
            text-align: center;
            font-size: r(30);
        }
        img{
            width: 100%;
        }
    }
    .huixian{
            width: 100%;
            background: #303030;
            height: 1%;
    }
    .xiala{
        margin-top: r(50);
        color: #7f7f7f;
        position: relative;
        .gimc_1{
            display: inline-block;
            vertical-align: middle;
            padding-left: r(40);
        }
        .xiangrou{
            position: relative;
//          display: inline-block;
//          position: absolute;
//          right: r(4);
//          top: r(-1);
            overflow: hidden;
            .gimc_2{
               padding-left: 40%;
               margin-top: 1%;
               font-size: r(30);
            }
            img{
                height: r(60);
                width: r(60);
                
            }
        }
    }
 
    .guanbi{
             width: 10%;
             padding:r(12);
             
             display: inline-block;

             img{
                 width:r(60);
               height:r(60);
                 vertical-align: middle;
             }
         }
         .shousou{
             display: inline-block;
             border: r(2) solid white;
             width: 75%;
             border-radius: r(40);
             
             img{
                 width: r(30);
                 height: r(30);
                 padding-left: r(10);
                 vertical-align: middle;
             }
             input{

                 width: r(400);
                 height: r(37);
                 border: none;
                 vertical-align: middle;
                 background: #000000;
             }
         }
}
.menu input[type="checkbox"]:checked~div {
    
    transform: translateX(0);
    z-index: 999;
}

.menu>div{
    width: 100%;
    height: 100%;
    background: black;
    transition: all .5s;
    transform: translateX(-100%);
    position: absolute;
    top: 0;
}
.menu input[type="checkbox"] {
    display: none;
    visibility: hidden;
    height: 0;
    width: 0;
}

.xiangrou input[type="checkbox"]:checked~div {
    height: r(150);
//  transform: translateY(0);
//  z-index: 999;
}

.xiangrou>div{
    
    
    width: 100%;
    height: r(50);
    overflow: hidden;
    background: black;
    transition: all 1s;
//  transform: translateY(-100%);
//  position: absolute;
//  top: 0;
}
.xiangrou label{
   position: absolute;
   top: r(-12);
   right: r(5);
}
.xiangrou input[type="checkbox"] {
    display: none;
    visibility: hidden;
    height: 0;
    width: 0;
}

